<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">订单列表</z-nav-bar>
			<view class="bg-white">
				<u-tabs :list="tabs" :current="current" :scrollable="false" lineColor="#FFB143" :activeStyle="{color: '#FFB143'}" @change="handleTabChange"></u-tabs>
			</view>
		</view>
		
		<view v-for="(item, index) in dataList" :key="index" class="bg-white u-p-20 u-m-b-30 " @click.stop="handleNavDetail(item)">
			<view v-for="(sku,index1) in item.skuDetails" :key="index1">
				<view class="u-flex " >
					<view class="u-flex-3">
						<image :src="sku.coverImage" style="width: 200rpx; height: 200rpx; border-radius: 20rpx;"></image>
					</view>
					<view class="u-flex-9 u-m-l-20">
						<view class="u-flex">
							<view class="u-flex-9">
								<view class="u-line-1 u-font-30 text-bold">{{sku.skuShortName}}</view>
							</view>
							<view class="u-flex-3 u-flex u-flex-end">
								<view style="opacity: 0.5;" class="u-font-22">
									<text>¥</text>
									<text>{{sku.sellPrice | formatMoneyToYuanFilter}}</text>
								</view>
							</view>
						</view>
						
						<view class="u-flex">
							<view class="u-flex-10 " style="opacity: 0.5;">
								<view class=" u-font-26 u-m-t-10 u-flex u-flex-wrap">
									<template v-if="item.orderType == orderTypeEnum.sku">
										<view v-for="(spec, index2) in sku.skuInfo" :key="spec.id">
											<text >{{spec.specValueName}}</text>
											<text v-if="index2 < sku.skuInfo.length - 1">,</text>
										</view>
										<view v-for="(gift, index3) in item.giftDetails" :key="gift.id">
											<text >，</text>
											<text>{{gift.giftName}}</text>
										</view>
									</template>
									<template v-if="item.orderType == orderTypeEnum.equity">
										<view>{{sku.skuShortName}}</view>
									</template>
								</view>
							</view>
							<view class="u-flex-2 u-flex u-flex-end">
								<view class="u-m-t-10 u-font-22">
									<text>×</text>
									<text>{{sku.buyCount}}</text>
								</view>
							</view>
						</view>
						
						<view class="u-flex">
							<view class="u-flex-8">
								<view class="u-line-1 u-font-22 u-m-t-10" style="opacity: 0.5;">
									<text>订单号:</text>
									<text>{{sku.orderId}}</text>
								</view>
							</view>
							<view class="u-flex-4 u-flex u-flex-end">
								<view class="u-m-t-10">
									<view>
										<text class="u-font-22 u-m-r-10" v-if="item.orderStatus == orderStatusEnum.pending">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.canceled">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.refund">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else-if="item.orderStatus == orderStatusEnum.return">应付款</text>
										<text class="u-font-22 u-m-r-10" v-else>实付款</text>
										<text class="u-font-20 text-red">¥</text>
										<text class="text-red">{{item.orderPrice | formatMoneyToYuanIntFilter}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="u-flex u-m-t-10">
							<view class="u-flex-12 u-flex">
								<view>
									<view v-if="item.orderStatus == orderStatusEnum.pending">
										<u-tag text="待支付" plain size="mini" type="warning" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.canceled">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已取消" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.refund">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已退款" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view class="u-flex" v-else-if="item.orderStatus == orderStatusEnum.return">
										<view class="u-m-r-10">
											<u-tag text="交易失败" plain size="mini" type="info" shape="circle"></u-tag>
										</view>
										<u-tag text="已退货" plain size="mini" type="info" shape="circle" ></u-tag>
									</view>
									<view v-else class="u-flex">
										<view class="u-m-r-10">
											<u-tag text="交易成功" plain size="mini" type="error" shape="circle"></u-tag>
										</view>
										<u-tag text="待发货" plain size="mini" type="warning" shape="circle" v-if="item.orderStatus == orderStatusEnum.processed"></u-tag>
										<u-tag text="待收货" plain size="mini" type="warning" shape="circle" v-else-if="item.orderStatus == orderStatusEnum.shipped"></u-tag>
										<u-tag text="待评价" plain size="mini" type="warning" shape="circle" v-else-if="item.orderStatus == orderStatusEnum.complete"></u-tag>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				<view class="u-flex u-m-t-10">
					<view class="u-flex-7 u-font-22" style="opacity: 0.5;">
						<text>下单时间:</text>
						<text class="u-m-l-10">{{item.createTime}}</text>
					</view>
					<view class="u-flex-5 u-flex u-flex-end" >
						
						<view v-if="item.orderStatus == orderStatusEnum.pending" @click.stop="handleOrderCancel(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx', 'margin-right':'10rpx'}">取消订单</u-button>
						</view>
						
						<view v-if="item.orderStatus == orderStatusEnum.pending" @click.stop="handleNavDetail(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">去支付</u-button>
						</view>
						
						
						<view v-if="item.orderStatus == orderStatusEnum.processed" @click.stop="handleSend">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">催催TA</u-button>
						</view>
						<view v-if="item.orderStatus == orderStatusEnum.shipped" @click.stop="handleOrderSignFor(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">确认签收</u-button>
						</view>
						<view v-if="item.orderStatus == orderStatusEnum.complete" @click.stop="handleOrderComment(item)">
							<u-button shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'160rpx', 'fontSize':'28rpx'}">评价</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<root-portal>
		<!-- #endif -->
		<u-popup :show="showOrderCancel"
							mode="bottom" 
							closeable
							@close="showOrderCancel = false">
				<cancelReason ref="cancelReasonForm" @notCancel="handleReasonNotCancel" @cancel="handleReasonCancel"></cancelReason>
				
		</u-popup>	
		<!-- #ifdef MP-WEIXIN -->
		</root-portal>
		<!-- #endif -->
			
		
		
		
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, orderStatusEnum, orderTypeEnum} from '@/common/const.js'
	import {getOrderPageList, orderSignFor, orderCancel} from '@/api/order.js'
	import cancelReason from './cancel'
	import {mapGetters} from 'vuex'
	
	export default{
		data(){
			return{
				orderTypeEnum,
				orderStatusEnum,
				tabs: [{
						name: '全部',
				}, {
						name: '待支付',
				}, {
						name: '待发货',
				}, {
						name: '待收货'
				}, {
						name: '待评价'
				}],
				dataList:[],
				requestParams:{},
				current:-1,
				
				showOrderCancel:false,
				currentOrder:null
			}
		},
		watch:{
			current(val){
				switch(val){
					case 0:
						// 全部
						this.requestParams.orderStatus = ''
						break;
					case 1:
						// 待支付
						this.requestParams.orderStatus = orderStatusEnum.pending
						break;
					case 2:
						// 待发货
						this.requestParams.orderStatus = orderStatusEnum.processed
						break;
					case 3:
						// 待收货
						this.requestParams.orderStatus = orderStatusEnum.shipped
						break;
					case 4:
						// 待评价
						this.requestParams.orderStatus = orderStatusEnum.comment
						break;
				}
				this.reload()
			}
		},
		onLoad(e) {
			this.init(e)
		},
		components:{
			cancelReason
		},
		computed:{
			...mapGetters(['userInfo']),
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(e){
				this.current = parseInt(e.index)
				uni.$on('reloadOrderList', ()=>{
					this.reload()
				})
			},
			
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询列表
			 */
			queryList(pageNo, pageSize){
				
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				console.log(this.requestParams)
				getOrderPageList(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
					}
					
					let data = res.data.records
					data.forEach(spu=>{
						spu.skuDetails.forEach(sku=>{
							if(sku.skuInfo){
								sku.skuInfo = JSON.parse(sku.skuInfo)
							}
							// 获取sku封面
							let images = sku.bannerImages.split(',')
							if(!sku.hasOwnProperty('coverImage')){
								this.$set(sku, 'coverImage', images[0])
							} else {
								sku.coverImage = images[0]
							}
						})
					})
					this.dataList = this.dataList.concat(data);
					console.log(this.dataList)
					this.$refs.paging.complete(res.data.records);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
				
				//this.$refs.paging.complete(this.dataList);
			},
			
			/**
			 * 切换订单状态
			 */
			handleTabChange(e){
				this.current = e.index
			},
			
			/**
			 * 取消订单
			 */
			handleOrderCancel(item){
				this.currentOrder = item
				this.showOrderCancel = true
			},
			
			/**
			 * 
			 */
			handleReasonNotCancel(){
				this.showOrderCancel = false
			},
			
			/**
			 * 取消订单，刷新界面
			 */
			handleReasonCancel(data){
				if(this.currentOrder == null) {
					return 
				}
				
				this.showOrderCancel = false
				let dataParams = {
					id: this.currentOrder.id,
					cancelReason: data.label
				}
				orderCancel(dataParams).then(res=>{
					this.$u.toast("订单已取消")
					// 重新加载
					this.reload()
				})
			},
			
			/**
			 * 跳转详情
			 */
			handleNavDetail(item){
				let orderId = item.id
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/order/detail?orderId=${orderId}`, true)
			},
			
			/**
			 * 催发货
			 */
			handleSend(){
				uni.showLoading({
					title:'发送中'
				})
				setTimeout(()=>{
					uni.hideLoading()
					this.$u.toast('已发送催货通知')
				},1000)
			},
			
			/**
			 * 去评论
			 */
			handleOrderComment(item){
				let data = {
					orderId: item.id,
					spuId:item.skuDetails[0].spuId,
					spuTitle:item.skuDetails[0].spuTitle,
					skuId:item.skuDetails[0].skuId,
					skuName:item.skuDetails[0].skuName,
					skuShortName:item.skuDetails[0].skuShortName,
					sellPrice:item.skuDetails[0].sellPrice,
					buyCount:item.skuDetails[0].buyCount,
					headerUrl: this.userInfo.headerUrl,
					nickName: this.userInfo.nickName
				}
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/order/comment?params=${encodeURIComponent(JSON.stringify(data))}`, true)
			},
			
			/**
			 * 确认签收
			 */
			handleOrderSignFor(item){
				let that = this
				uni.showModal({
					title: '提示操作',
					content: '是否确认签收该商品？',
					success: function (res) {
						if (res.confirm) {
							// 签收
							orderSignFor({
								id: item.id
							}).then(result=>{
								that.$u.toast("签收成功")
								that.reload()
							})
						} else if (res.cancel) {
								//console.log('用户点击取消');
						}
					}
				});
			}
			
			
		}
	}
</script>

<style>
	
</style>